<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" href="css/jquery.fullPage.css">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.fullPage.min.js"></script>
	<script type="text/javascript" src="js/easer.js"></script>
	<script type="text/javascript" src="js/bdMap.js"></script>
	<script>
	$(function(){
		$('#dowebok').fullpage({
					
				});
	})
			
		</script>
	<script type = "text/javascript">
	addEventListener( "load", init, false );
	function init( event ) {
	//下面的代码实现当画布被擦除50%时触发事件showResetButton。
	$('#redux').eraser( {
		completeRatio: .3,
		completeFunction: hideEaser
	});
		}
		function reset(event) {
			$("#redux").eraser('reset');
			event.preventDefault();
		}
		function grow(event) {
			$("#redux").eraser("size",150);		/* 橡皮擦大小 */
			event.preventDefault();
		}

		//下面的代码实现当画布被擦除50%时触发事件showResetButton。
		$('#redux').eraser( {
			completeRatio: .5,
			completeFunction: hideEaser
		});

		function hideEaser(){
			$(".open").css("display","none");
			$(".full-container").css("display","block");
		}
		</script>

		

	<title></title>
	<style>
		.fp-tableCell{
			vertical-align: top;
		}
		
		* {
		-webkit-touch-callout: none;
		-webkit-text-size-adjust: none;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-user-select: none;
	}

		.big {
		font-size: 2em;
		display: inline-block;
		margin: 10px;
	}

		.container {
		position: relative;
		display: inline-block;
		width: 533px;
		height: 380px;
		}
		#robot {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1;
			-webkit-box-shadow: 0px 0px 20px 0px #707070;
			-moz-box-shadow: 0px 0px 20px 0px #707070;
			box-shadow: 0px 0px 20px 0px #707070;
		}
		#redux {
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 2;
		}
		.load{
			position: relative;
		}
		.layout{
			position: absolute;
			top: 0;
			background: #fff;
		}
		.password{
			z-index: 22;
		}
		.btns ul li{
			display: block;
			width: 40px;
			height: 40px;
			z-index: 99999;
			margin-bottom: 10px;
			background: green;

		}
		.music{
			color: #333;
		}
		.music.on{
			color:red;
		}
		.open .container{
			width: 100%;
			height: 100%;

		}
		.full-container{
			position: absolute;
			top: 0;
			display: none;
		}
		.btns{
			position: absolute;
			top: 0;
			background: rgba(0,0,0,0.3);
		}
		.bless-content,.map-content,.gifts-content{
			position: absolute;
			bottom: 0;
			display: none;
		}
		.map-content,.map-wp,.map-shade{
			width: 100%;
			height: 100%;
		}
		.map-wp{
			position: relative;
		}
		.map-shade,.map-bd{
			position: absolute;
			bottom: 0;
		}
		.map-shade{
			background: rgba(77,55,55,0.3);
		}
		.gifts-content{
			width: 100%;
			height: 50%;

		}
		.gift-block{
			width: 25%;
			height: 50%;
			background: blue;
			box-sizing: border-box;
			border:1px solid #333;
			float: left;
		}

	

	</style>
	
</head>
<body>

<audio class="audio" src="audio/1.mp3" autoplay="true"></audio>
<div class="load">
	<div class="open layout">
		<span class="container">
				<img id="robot" src="images/banner-2.jpg" />
				<img id="redux" src="images/banner-3.jpg" />
		</span>
		

	</div>

	<div id="dowebok" class="full-container">
		<div class="section">
			<h3>我们的故事</h3>
		</div>
		<div class="section">
			<h3>相册</h3>
			<div class="slide">
					<h3>第4屏的第一屏</h3></div>
				<div class="slide">
					<h3>第4屏的第二屏</h3></div>
				<div class="slide">
					<h3>第4屏的第三屏</h3></div>
		</div>
	</div>	
	<div class="btns">
		<ul>
			<li class="music on">音乐</li>
			<li class="bless">祝福</li>
			<li class="map">导航</li>
			<li><a href="">商业</a></li>
			<li>分享</li>
			<li><a href="calculate.html">统计</a></li>
			<li><a href="seat.html">座次</a></li>
			<li class="gifts">礼物</li>
		</ul>
	</div>
	<div class="bless-content">
		<form action="">
			<input type="text">
			<button type="submit">发送</button>
		</form>
			
	</div>
	<div class="map-content">
	     <div class="map-wp">
	     	<div class="map-shade"></div>
			<div id="map" class="map-bd" style="height:300px;width:400px;border:1px solid #bcbcbc;"></div>
	     </div>
		
				<script type="text/javascript">
					ShowMap("map", {
						city: '郑州金水区',
						title: '吊儿',
						lawfirm: 'XXX公司',
						tel: '1362380952x',
						pic: '',
						ismove: '0',
						piobj: 'nxp'
					});
				</script>
	</div>
	<div class="gifts-content">
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
		<div class="gift-block"></div>
	</div>

</div>



	<script>
	var _w=$(window).width();
	var _h=$(window).height();
		$(".layout,.load,.container,.btns").width(_w).height(_h);
		
	$(".music").on("click",function(){
		if($(".music").hasClass("on")){
		$(this).removeClass("on");
		$(".audio").trigger("pause");
		}
		else{
			$(this).addClass("on")
			$(".audio").trigger("play");
		}
	})

	$(".bless").on("click",function(){
		$(".bless-content").css("display","block");
	})
	$(".map").on("click",function(){
		$(".map-content").css("display","block");
		$(".map-shade").on("click",function(){
			$(".map-content").css("display","none");
		})
	})
	$(".gifts").on("click",function(){
		$(".gifts-content").css("display","block");
		$(".gift-block").on("click",function(){
			$(".gifts-content").css("display","none");
			console.log("ok")
		})
	})
	

	</script>
	
</body>
</html>